{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '常用插件:example/plugin/index', '日程插件'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <div id="calendar" data-provide="fullcalendar"></div>

        </div>
      </div>
    </div>

  </div>

  <!-- 编辑日程 -->
<div class="modal fade" id="modal-event" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <form action="#!" method="post" onsubmit="return false;" id="event_form">
        <div class="modal-header">
          <h6 class="modal-title">编辑一个日程</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <div class="modal-body">
          <div class="mb-3">
            <label>标题</label>
            <input type="text" class="form-control" name="title" id="title" placeholder="日程标题">
          </div>
  
          <div class="mb-3">
            <label>开始日期和时间</label>
            <div class="input-group">
              <input class="form-control" data-provide="datepicker" data-today-highlight="true" data-date-format="yyyy-mm-dd" type="text" placeholder="日期" data-autoclose="true" name="start_day" id="start_day">
              <span class="input-group-text">-</span>
              <input class="form-control" data-provide="datetimepicker" data-side-by-side="true" data-format="HH:mm" type="text" placeholder="具体时间" name="start_time" id="start_time">
            </div>
          </div>
  
          <div class="mb-3">
            <label>结束日期和时间</label>
            <div class="input-group">
              <input class="form-control" data-provide="datepicker" data-today-highlight="true" data-date-format="yyyy-mm-dd" type="text" placeholder="结束日期,如果全天则不设置结束日期" data-autoclose="true" name="end_day" id="end_day">
              <span class="input-group-text">-</span>
              <input class="form-control" data-provide="datetimepicker" data-side-by-side="true" data-format="HH:mm" type="text" placeholder="具体时间" name="end_time" id="end_time">
            </div>
          </div>
  
          <div class="mb-3">
            <label>备注</label>
            <textarea class="form-control" rows="3" name="remark" id="remark" placeholder="简要说明"></textarea>
          </div>
  
          <div class="text-center">
            <div class="lyear-skin-li clearfix">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_1" value="bg-primary" checked="checked">
                <label class="form-check-label bg-primary" for="event_bg_1"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_2" value="bg-success">
                <label class="form-check-label bg-success" for="event_bg_2"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_3" value="bg-info">
                <label class="form-check-label bg-info" for="event_bg_3"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_4" value="bg-warning">
                <label class="form-check-label bg-warning" for="event_bg_4"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_5" value="bg-danger">
                <label class="form-check-label bg-danger" for="event_bg_5"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_6" value="bg-pink">
                <label class="form-check-label bg-pink" for="event_bg_6"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_7" value="bg-purple">
                <label class="form-check-label bg-purple" for="event_bg_7"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_8" value="bg-brown">
                <label class="form-check-label bg-brown" for="event_bg_8"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_9" value="bg-cyan">
                <label class="form-check-label bg-cyan" for="event_bg_9"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_10" value="bg-yellow">
                <label class="form-check-label bg-yellow" for="event_bg_10"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_11" value="bg-teal">
                <label class="form-check-label bg-teal" for="event_bg_11"></label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="event_bg" id="event_bg_12" value="bg-dark">
                <label class="form-check-label bg-dark" for="event_bg_12"></label>
              </div>
            </div>
          </div>
        </div>
  
        <div class="modal-footer">
          <input type="hidden" name="event_id" id="event_id" value="0" />
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveEvent();">保存</button>
        </div>
        </form>
      </div>
    </div>
  </div>
  <!-- end 编辑日程 -->
  <!-- 展示日程 -->
  <div class="modal fade" id="modal-view-event" tabindex="-1">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title">日程内容</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <div class="modal-body">
          <div class="mb-3">
            <label>时间</label>
            <div class="event-time"></div>
          </div>
  
          <div class="mb-3">
            <label>备注</label>
            <div class="event-remark"></div>
          </div>
        </div>
  
        <div class="modal-footer">
          <button class="btn btn-primary" data-id="0" id="open-modal-edit">去编辑</button>
        </div>
      </div>
    </div>
  </div>
  <!-- end 展示日程 -->

  <script type="text/javascript">
    $(document).ready(function() {
        // 日期选择器
        jQuery("[data-provide = 'datepicker']").each(function() {
            var options = {
                language: 'zh-CN',  // 默认简体中文
                multidateSeparator: ', ' // 默认多个日期用,分隔
            }
      
            options = $.extend( options, getDataOptions( $(this) ));
      
            if ( $(this).prop("tagName") != 'INPUT' ) {
                options.inputs = [$(this).find('input:first'), $(this).find('input:last')];
            }
      
            $(this).datepicker(options);
        });
        
        // 时间日期选择器
        jQuery("[data-provide = 'datetimepicker']").each(function() {
            var options = {
                locale: moment.locale(),
            }
      
            options = $.extend( options, getDataOptions( $(this) ));
      
            if ( $(this).prop("tagName") != 'INPUT' ) {
                options.inputs = [$(this).find('input:first'), $(this).find('input:last')];
            }
    
            $(this).datetimepicker(options);
        });

        var calendarEl = document.getElementById('calendar');
    
    // 定义时间点（避免时间变化导致示例不显示）
    var thisDate     = new Date();
    var thisFullYear = thisDate.getFullYear();
    var thisMonth    = thisDate .getMonth() + 1;
    if (thisMonth < 10) thisMonth = '0' + thisMonth;
    
    var testDate1 = thisFullYear + '-' + thisMonth + '-01';
    var testDate2 = thisFullYear + '-' + thisMonth + '-07';
    var testDate3 = thisFullYear + '-' + thisMonth + '-10';
    var testDate4 = thisFullYear + '-' + thisMonth + '-09T16:00:00';
    var testDate5 = thisFullYear + '-' + thisMonth + '-16T16:00:00';
    var testDate6 = thisFullYear + '-' + thisMonth + '-11';
    var testDate7 = thisFullYear + '-' + thisMonth + '-13';
    var testDate8 = thisFullYear + '-' + thisMonth + '-12T10:30:00';
    var testDate9 = thisFullYear + '-' + thisMonth + '-12T12:30:00';
    var testDate10 = thisFullYear + '-' + thisMonth + '-12T12:00:00';
    var testDate11 = thisFullYear + '-' + thisMonth + '-12T14:30:00';
    var testDate12 = thisFullYear + '-' + thisMonth + '-12T17:30:00';
    var testDate13 = thisFullYear + '-' + thisMonth + '-12T20:00:00';
    var testDate14 = thisFullYear + '-' + thisMonth + '-12T19:00:00';
    var testDate15 = thisFullYear + '-' + thisMonth + '-28';
    
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'rrule' ],
        //height: 'parent',
        header: {
            left: 'today prev,next day',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        buttonText: {
            today:    '今天',
            month:    '月',
            week:     '周',
            day:      '天',
            list:     '列表'
        },
        defaultView: 'dayGridMonth',
        //navLinks: true, // 可以单击日/周名称导航视图。
        //selectable: true, // 允许用户通过单击和拖动突出显示多天或多个时间段。
        editable: true, // 确定是否可以修改日历上的事件。
        eventLimit: true, // 当事件太多时允许“更多”链接
        events: [
        {
          id: 1,
          title: '公司召开年会',
          start: testDate1,
        },
        {
          id: 2,
          title: '话剧全国巡演第二场',
          start: testDate2,
          end: testDate3
        },
        {
          id: 3,
          title: '工作报告',
          start: testDate4
        },
        {
          id: 4,
          title: '工作报告',
          start: testDate5
        },
        {
          id: 5,
          title: '研讨会',
          start: testDate6,
          end: testDate7
        },
        {
          id: 6,
          title: '会议',
          start: testDate8,
          end: testDate9,
          className: 'bg-danger'
        },
        {
          id: 7,
          title: '午餐',
          start: testDate10
        },
        {
          id: 8,
          title: '会议',
          start: testDate11,
          className: 'bg-danger'
        },
        {
          id: 9,
          title: '休息一会',
          start: testDate12,
        },
        {
          id: 10,
          title: '晚餐',
          start: testDate13
        },
        {
          id: 11,
          title: '生日宴会',
          start: testDate14,
          remark: '一定要记得参加',
          className: 'bg-purple'
        },
        {
          id: 12,
          title: '打开百度',
          url: 'https://www.baidu.com/',
          start: testDate15
        }],
        dateClick: function(date, jsEvent, view) {
            $('#modal-event').modal('show');
        },
        eventClick: function(date, jsEvent, view) {
            $('#modal-view-event').find('.modal-title').text(date.event.title);
            var time_str = formatDate(date.event.start, 'yyyy-MM-dd HH:mm:ss');
            if (date.event.hasOwnProperty('end')) {
                time_str += ' - ' + formatDate(date.event.end, 'yyyy-MM-dd HH:mm:ss'); // 根据自己的需求格式化时间显示
            }
            $('#modal-view-event').find('.event-time').text(time_str);
            if (date.event.extendedProps.hasOwnProperty('remark')) {
                $('#modal-view-event').find('.event-remark').text(date.event.extendedProps.remark);
            }
            $('#open-modal-edit').attr('data-id', date.event.id);
            $('#modal-view-event').modal('show');
        }
    });
    
    calendar.render();
    calendar.setOption('locale', 'zh');

    // 打开编辑窗口
    $('#open-modal-edit').click(function(){
        var event_id = $(this).attr('data-id'),
            eventObj = calendar.getEventById(event_id);
        
        $("#modal-event").find('#title').val(eventObj.title);
        var start_day  = formatDate(eventObj.start, 'yyyy-MM-dd'),
            start_time = formatDate(eventObj.start, 'HH:mm');
    
        $("#start_day").val(start_day);
        $("#start_time").val(start_time);
        if (eventObj.extendedProps.hasOwnProperty('remark')) {
            $("#remark").val(eventObj.extendedProps.remark);
        }
        $("input:radio[value='" + eventObj.classNames[0] + "']").prop('checked','true');
        $('#event_id').val(event_id); // 重置为零
        $('#modal-view-event').modal('hide');
        $('#modal-event').modal('show');
    });
    
    // 点击关闭按钮的处理
    $('.close').click(function(){
        if ($(this).parents('.modal').has('#event_form')) {
            $('#event_form')[0].reset(); // 重置表单
            $('#event_id').val('0'); // 重置为零
        }
    });
    
    // 点击取消的处理
    $('[data-dismiss]').click(function(){
        if ($(this).parents('.modal').has('#event_form')) {
            $('#event_form')[0].reset(); // 重置表单
            $('#event_id').val('0'); // 重置为零
        }
    });

    });
    
    
    // 编辑日程
    function saveEvent() {
        var title        = $('#title').val(),
            start_day    = $('#start_day').val(),
            start_time   = $('#start_time').val(),
            end_day      = $('#end_day').val(),
            end_time     = $('#end_time').val(),
            remark       = $('#remark').val(), // 按个人需求，可记录到数据库
            event_bg     = $("input[name='event_bg']:checked").val(),
            event_id     = $('#event_id').val(),
            event_params = {};
        
        if (title.length == 0) {
            alert('标题不能为空');  // 自行修改消息插件提示
            return false;
        } else {
            event_params.title = title;
        }
        if (start_day.length == 0 ) {
            alert('开始时间不能为空');
            return false;
        }
        var start_str  = start_day;
        if (start_time.length > 0) {
            start_str  = start_day + 'T' + start_time + ':00';// 示例中只到分，如需设置秒，则自行更改，input配置HH:mm:ss
        }
        var start_date = new Date(start_str);
        if (!isNaN(start_date.valueOf())) {
            event_params.start = start_str;
        } else {
            alert('开始日期格式错误');
            return false;
        }
        if (end_day.length > 0) {
            var end_str = end_day;
            if (end_time.length > 0) {
                end_str = end_day + 'T' + end_time + ':00'; // 示例中只到分，如需设置秒，则自行更改，input配置HH:mm:ss
            }
            var end_date = new Date(end_str);
            if (!isNaN(end_date.valueOf())) {
                event_params.end = end_str;
            } else {
                alert('结束日期格式错误');
                return false;
            }
        }
        if (event_bg.length > 0) {
            event_params.className = event_bg;
        }
        if ($.trim(remark).length > 0) {
            event_params.remark = remark;
        }
        
        if (event_id > 0) {
            // 提交修改
            var eventObj = calendar.getEventById(event_id);
            eventObj.setProp('title', event_params.title);
            eventObj.setProp('classNames', event_params.className);
            eventObj.setStart(event_params.start);
            if (event_params.hasOwnProperty('end')) {
                eventObj.setStart(event_params.end);
            }
            if (event_params.hasOwnProperty('remark')) {
                eventObj.setExtendedProp('remark', event_params.remark);
            }
        } else {
            // 提交新增
            calendar.addEvent(event_params);
        }
        $('#event_form')[0].reset(); // 重置表单
        $('#event_id').val('0'); // 重置为零
        $('#modal-event').modal('hide');
    }
    
    // 时间格式化
    function formatDate(date = new Date(), fmt = 'yyyy-MM-dd HH:mm:ss') {
        date = (typeof date === 'number' || typeof date === 'string') ? new Date(date) : date;
    
        var o = {
            'M+': date.getMonth() + 1, // 月份
            'd+': date.getDate(), // 日
            'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
            'H+': date.getHours(), // 小时
            'm+': date.getMinutes(), // 分
            's+': date.getSeconds(), // 秒
            'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
            'S': date.getMilliseconds() // 毫秒
        };
        var week = {
            '0': '\u65e5',
            '1': '\u4e00',
            '2': '\u4e8c',
            '3': '\u4e09',
            '4': '\u56db',
            '5': '\u4e94',
            '6': '\u516d'
        };
    
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
    
        if (/(E+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + '']);
        }
    
        for (var k in o) {
            if (new RegExp('(' + k + ')').test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
            }
        }
    
        return fmt;
    }
    </script>